<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/18 0018
  Time: 20:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/china.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.all.js"></script>





   
</head>
<body>

<!-- 1.为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<div id="myChina" style="width: 600px;height:400px;"></div>


</body>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    <%--$.ajax({--%>
        <%--url:"${pageContext.request.contextPath}/consumer/selectNumber",--%>
        <%--success:function (data) {--%>
            <%--console.log(data);--%>
            <%--// 2.基于准备好的dom，初始化echarts实例--%>
           <%----%>

            <%--// 3.指定图表的配置项和数据 属性的配置--%>
            <%--var option = {--%>
                <%--// 图表的标题--%>
                <%--title: {--%>
                    <%--text: '持明法州用户男女人数对比'--%>
                <%--},--%>
                <%--// 工具栏--%>
                <%--tooltip: {},--%>
                <%--// legend 传奇 在统计学中 系列  在当前图表中有多少种数据--%>
                <%--legend: {--%>
                    <%--data:['人数']--%>
                <%--},--%>
                <%--// x轴坐标--%>
                <%--xAxis: {--%>
                    <%--data:["男道友","女道友"]--%>
                        <%--//[data[0].key,data[1].key],--%>
                        <%--// ["男道友","女道友"]--%>
                <%--},--%>
                <%--// y轴坐标 不用写 自动生成--%>
                <%--yAxis: {},--%>
                <%--// 给x轴赋值坐标值--%>
                <%--series: [{--%>
                    <%--// 对应的是legend中的数据--%>
                    <%--name: '人数',--%>
                    <%--// 定义图表类型 bar柱状图  line折线图--%>
                    <%--type: 'bar',--%>
                    <%--// x轴的数据 和 x轴坐标--%>
                    <%--data:[data.userDTOS.manNumber,data.userDTOS.womanNumber]--%>
                     <%--//[5, 20]--%>
                <%--}]--%>
            <%--};--%>







            <%--// 使用刚指定的配置项和数据显示图表。--%>
            <%--myChart.setOption(option);--%>


        <%--}--%>
    <%--});--%>

    var myChina = echarts.init(document.getElementById('myChina'));

    <%--$.ajax({--%>
        <%--url:"${pageContext.request.contextPath}/consumer/selectNumberConsumer",--%>
        <%--success:function (data) {--%>

            <%--console.log(data);--%>

          <%----%>

            <%--//    配置地区分布图表数据--%>
            <%--var option3 = {--%>
                <%--title : {--%>
                    <%--text: '用户地区分布',--%>
                    <%--left: 'center'--%>
                <%--},--%>
                <%--tooltip : {--%>
                    <%--trigger: 'item'--%>
                <%--},--%>
                <%--legend: {--%>
                    <%--orient: 'vertical',--%>
                    <%--left: 'left',--%>
                    <%--data:['用户人数']--%>
                <%--},--%>
                <%--visualMap: {--%>
                    <%--min: 0,--%>
                    <%--max: 25000,--%>
                    <%--left: 'left',--%>
                    <%--top: 'bottom',--%>
                    <%--text:['高','低'],           // 文本，默认为数值文本--%>
                    <%--calculable : true--%>
                <%--},--%>
                <%--toolbox: {--%>
                    <%--show: true,--%>
                    <%--orient : 'vertical',--%>
                    <%--left: 'right',--%>
                    <%--top: 'center',--%>
                    <%--feature : {--%>
                        <%--mark : {show: true},--%>
                        <%--dataView : {show: true, readOnly: false},--%>
                        <%--restore : {show: true},--%>
                        <%--saveAsImage : {show: true}--%>
                    <%--}--%>
                <%--},--%>
                <%--series : [--%>
                    <%--{--%>
                        <%--name: '用户人数',--%>
                        <%--type: 'map',--%>
                        <%--mapType: 'china',--%>
                        <%--roam: false,--%>
                        <%--label: {--%>
                            <%--normal: {--%>
                                <%--show: false--%>
                            <%--},--%>
                            <%--emphasis: {--%>
                                <%--show: true--%>
                            <%--}--%>
                        <%--},--%>
                        <%--data:data--%>
                      <%----%>
                    <%--}--%>
                <%--]--%>
            <%--};--%>

            <%--myChina.setOption(option3);--%>

        <%--}--%>
    <%--});--%>


    // 使用刚指定的配置项和数据显示图表。
    var myChart2 = echarts.init(document.getElementById('main2'));
    <%--$.ajax({--%>
        <%--url:"${pageContext.request.contextPath}/consumer/selectByDayCount",--%>
        <%--dataType:"JSON",--%>
        <%--success:function (data) {--%>

            <%--var option2 = {--%>
                <%--title : {--%>
                    <%--text: '过去三周用户注册量变化',--%>
                <%--},--%>
                <%--tooltip : {--%>
                    <%--trigger: 'axis'--%>
                <%--},--%>
                <%--legend: {--%>
                    <%--data:['人数变化']--%>
                <%--},--%>
                <%--toolbox: {--%>
                    <%--show : true,--%>
                    <%--feature : {--%>
                        <%--mark : {show: true},--%>
                        <%--dataView : {show: true, readOnly: false},--%>
                        <%--magicType : {show: true, type: ['line', 'bar']},--%>
                        <%--restore : {show: true},--%>
                        <%--saveAsImage : {show: true}--%>
                    <%--}--%>
                <%--},--%>
                <%--calculable : true,--%>
                <%--xAxis : [--%>
                    <%--{--%>
                        <%--type : 'category',--%>
                        <%--boundaryGap : false,--%>
                        <%--data : ['过去三周内','过去两周内','过去一周内']--%>
                    <%--}--%>
                <%--],--%>
                <%--yAxis :{},--%>
                <%--series : [--%>
                    <%--{--%>
                        <%--name:'注册人数',--%>
                        <%--type:'line',--%>
                        <%--data:[data.three, data.two, data.one],--%>
                        <%--markPoint : {--%>
                            <%--data : [--%>
                                <%--{type : 'max', name: '最大值'},--%>
                                <%--{type : 'min', name: '最小值'}--%>
                            <%--]--%>
                        <%--},--%>
                        <%--markLine : {--%>
                            <%--data : [--%>
                                <%--{type : 'average', name: '平均值'}--%>
                            <%--]--%>
                        <%--}--%>
                    <%--}--%>
                <%--]--%>
            <%--};--%>

            <%--// 3.使用刚指定的配置项和数据显示图表。--%>
            <%--myChart2.setOption(option2);--%>
        <%--}--%>
    <%--})--%>



    $.ajax({
        url:"${pageContext.request.contextPath}/consumer/selectAllOrder",
        success:function (data) {



            // 2.基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 3.指定图表的配置项和数据 属性的配置
            var option = {
                // 图表的标题
                title: {
                    text: '持明法州用户男女人数对比'
                },
                // 工具栏
                tooltip: {},
                // legend 传奇 在统计学中 系列  在当前图表中有多少种数据
                legend: {
                    data:['人数']
                },
                // x轴坐标
                xAxis: {
                    data:["男道友","女道友"]
                    //[data[0].key,data[1].key],
                    // ["男道友","女道友"]
                },
                // y轴坐标 不用写 自动生成
                yAxis: {},
                // 给x轴赋值坐标值
                series: [{
                    // 对应的是legend中的数据
                    name: '人数',
                    // 定义图表类型 bar柱状图  line折线图
                    type: 'bar',
                    // x轴的数据 和 x轴坐标
                    data:[data.sex.userDTOS.manNumber,data.sex.userDTOS.womanNumber]
                    //[5, 20]
                }]
            };





            var myChina = echarts.init(document.getElementById('myChina'));

            //    配置地区分布图表数据
            var option3 = {
                title : {
                    text: '用户地区分布',
                    left: 'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['用户人数']
                },
                visualMap: {
                    min: 0,
                    max: 25000,
                    left: 'left',
                    top: 'bottom',
                    text:['高','低'],           // 文本，默认为数值文本
                    calculable : true
                },
                toolbox: {
                    show: true,
                    orient : 'vertical',
                    left: 'right',
                    top: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '用户人数',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:data.count
                        // data:[data[0],data


                    }
                ]
            };



            var option2 = {
                title : {
                    text: '过去三周用户注册量变化',
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['人数变化']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : ['过去三周内','过去两周内','过去一周内']
                    }
                ],
                yAxis :{},
                series : [
                    {
                        name:'注册人数',
                        type:'line',
                        data:[data.week.three, data.week.two, data.week.one],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };

            // 3.使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);

            myChina.setOption(option3);







            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);



        }
    });






</script>
</html>
